<template>
    <el-form :model="form" :rules="rules" ref="formValid">
        <el-form-item label="负责人" prop="user">
            <el-select v-model="form.user" placeholder="请选择负责人" @click="getUserOption" style="width: 140px">
                <el-option v-for="item, index in UserOption" :label="item" :value="item" :key="index" />
            </el-select>
        </el-form-item>
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="activityName">
            <el-input v-model="form.activityName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="开始时间" prop="starttime">
            <el-date-picker v-model="form.starttime" type="datetime" placeholder="Pick a Date"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endtime">
            <el-date-picker v-model="form.endtime" type="datetime" placeholder="Pick a Date"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="活动预算" :label-width="formLabelWidth" prop="budget">
            <el-input v-model="form.budget" autocomplete="off" />
        </el-form-item>
        <el-form-item label="活动描述" :label-width="formLabelWidth" prop="description">
            <el-input v-model="form.description" autocomplete="off"  :rows="2"
            type="textarea" style="width: 240px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
            <el-button type="primary" @click="back">返回</el-button>
            <el-button type="primary" @click="submit(formValid)">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { doGet,doPost} from '@/util/axios';
import { notify } from '@/util/notification';
import { ref,onMounted} from 'vue';
import { useRouter,useRoute } from 'vue-router';
let router=useRouter()
let route=useRoute()
let form=ref({})
let UserOption=ref([])
let formValid={}
let rules={
    user:[
        { required: true, message: '请选择', trigger: 'blur' }
    ],
    activityName:[
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    ],
    starttime:[
    { required: true, message: '请选择日期', trigger: 'blur' },
    ],
    endtime:[
        { required: true, message: '请选择日期', trigger: 'blur' },
    ],
  budget:[
  { required: true, message: '请输入预算', trigger: 'blur' },
  ],
  description:[
  { required: true, message: '请输入详细', trigger: 'blur' },
  { min: 2, max: 255, message: '详细长度在2-255', trigger: 'blur' },
  ]
}
onMounted(()=>{
   getUserOption()
   if(route.params.id){
    getUserInfo(route.params.id)
   }
})
function getUserInfo(id){
  doGet("/getActivityById",{id:id}).then(res=>{
    if(res.data.code==200){
      form.value=res.data.data
    }
  })
}
function getUserOption(){
  if(UserOption.value.length === 0){
      doGet("/getUserOption").then(res=>{
      UserOption.value=res.data.data
    })
  }
}
function submit(formValid){
    if (!formValid) return
    formValid.validate((valid, fields) => {
    if (valid) {
      if(route.params.id){
        doPost("/editActivity/"+route.params.id,form.value).then(res=>{
          if(res.data.code==200){
            notify("修改成功","success")
            form.value={}
            router.back()
          }else{
            notify("修改失败","error")
          }
        })
      }else{
          doPost("/addActivity",form.value).then(res=>{
          if(res.data.code==200){
            notify("添加成功","success")
            form.value={}
            router.back()
          }else{
            notify("添加失败","error")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
function back(){
  router.back()
}
</script>
<style scope>

</style>